#{extends 'Users/frame.html' /}

#{set 'moreStyles'}
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/Users/edit.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/Users/message.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/navigationbar.scss'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/pager/Pager.css'}" />
#{/set}
#{set 'moreScripts'}
<script src="@{'/public/pager/jquery.pager.js'}" type="text/javascript" charset="utf-8"></script>
#{/set}
<script language="javascript">
//左边列表选中状态。
$(function(){
	$("#mi_receiveMessage").addClass("menu-select");
});
</script>
<div class="navigationBar">
	<table>
		<tr>
			<td><img src="@{'/public/images/navigationHouse.gif'}"></td>
			<td><strong>当前位置：</strong></td>
			<td>
				<a href="/">首页</a>
				>>
				<a href="/users">会员中心</a>
				>>
				<font class="current">接收消息</font>
			</td>
		</tr>
	</table>
</div>
<script language="javascript">
	$(function(){
		//初始化翻页控件。
		$("#pager").pager(
			{
				pagenumber: ${queryBean.currentPage}, 
				pagecount: ${queryBean.totalPage}, 
				totalcount: ${queryBean.totalQuantity},
				buttonClickCallback: PageClick 
			}
		);
		//设置为已读。
		markReadMessage();
	});
	//翻页功能。
	PageClick = function(pageclickednumber) {
		$("#currentPage").val(pageclickednumber);
		doSearch();
	}
	
	function doSearch() {
		$("#form1").submit();
	}
	
	function doReply(id) {
		var value = $("#"+"text_"+id).val();
		$.ajax({
			url: "/users/message/reply",
			data: "id="+id+"&content="+value,
			type: "POST",
			dataType: "json",
			complete: function(XMLHttpRequest, textStatus, errorThrown) {
				if(textStatus == "error") {
					var errJson = eval("("+XMLHttpRequest.responseText+")");
					var errMsg = "回复失败，"+errJson.message;
					$("#errMsg").html(errMsg);
					alert(errMsg);
				} else {
					doSearch();
				}
			}
		});
	}
	
	function markReadMessage() {
		var unReadIds = $(".unreadMsgIds");
		if(!unReadIds || unReadIds.length <=0) return;
		var idsData = "";
		for(var i=0 ; i<unReadIds.length ; i++) {
			if(i>0) idsData = idsData + "&";
			idsData = idsData + "unReadId["+i+"]=" + unReadIds[i].value;
		}
		$.ajax({
			url: "/users/message/markReadMessage",
			data: idsData,
			type: "POST",
			dataType: "json",
			complete: function(XMLHttpRequest, textStatus, errorThrown) {
				if(textStatus == "error") {
					var errJson = eval("("+XMLHttpRequest.responseText+")");
					var errMsg = "回复失败，"+errJson.message;
				}
			}
		});
	}
</script>
</table>
<div id="edit-comment">
	<div id="errMsg" class="error">
		${errMsg}
		#{error 'errMsg'/}
	</div>
	<table class="commodity-query">
		#{form @UserMessage.index(), name:'form1', id:'form1'}
			<input type="hidden" id="currentPage" name="queryBean.currentPage" value="${queryBean.currentPage}">
			每页
			<select name="queryBean.quantityEachPage" onchange="doSearch()">
				<option value="2" #{if queryBean.quantityEachPage==2} selected #{/if}>2</option>
				<option value="10" #{if queryBean.quantityEachPage==10} selected #{/if}>10</option>
				<option value="25" #{if queryBean.quantityEachPage==25} selected #{/if}>25</option>
				<option value="50" #{if queryBean.quantityEachPage==50} selected #{/if}>50</option>
			</select>
			条记录
		#{/form}
	</table>
	<table class="messages">
		#{if msgs}
			#{list items:msgs, as:'msg'}
				<tr #{if msg.toUser && msg.isread==false}class="newMessage"#{/if}>
					<td width="50px" class="messageBorder #{if msg.toUser && msg.isread==false}newMessage#{/if}">
						<font class="important_1">
						#{if msg.type == models.Message.MessageType.CONSULTING}[咨询]#{/if}
						#{if msg.type == models.Message.MessageType.SUGGEST}[建议]#{/if}
						#{if msg.type == models.Message.MessageType.REFUND}[退款]#{/if}
						#{if msg.type == models.Message.MessageType.OTHER}[其他]#{/if}
						</font>
					</td>
					<td width="120px" class="messageBorder textRight #{if msg.toUser && msg.isread==false}newMessage#{/if}">
						#{if msg.toUser && msg.isread==false}
							<input type="hidden" class="unreadMsgIds" value="${msg.id}">
						#{/if}
						#{if msg.creatorType == models.BaseEntity.PeopleType.USER}
							<font class="important_1"> 你 </font>对<font class="important_2"> 管理员 </font>说：
						#{/if}
						#{if msg.toUser != null}
							<font class="important_2"> 管理员 </font>对<font class="important_1"> 你 </font>说：
						#{/if}
					</td>
					<td class="messageBorder #{if msg.toUser && msg.isread==false}newMessage#{/if}">
						${msg.content}
					</td>
					<td width="90px" class="messageBorder #{if msg.toUser && msg.isread==false}newMessage#{/if}">
						${msg.createAt.format("yyyy-MM-dd hh:mm:ss")}
					</td>
				</tr>
				#{if msg.replys}
					#{list msg.replys, as:'reply'}
					<tr>
						<td></td>
						<td class="textRight #{if reply.toUser && reply.isread==false}newMessage#{/if}">
							#{if reply.toUser && reply.isread==false}
								<input type="hidden" class="unreadMsgIds" value="${reply.id}">
							#{/if}
							#{if reply.creatorType == models.BaseEntity.PeopleType.USER}
								<font class="important_1"> 你 </font>回复： 
							#{/if}
							#{if reply.creatorType == models.BaseEntity.PeopleType.ADMIN}
								<font class="important_2"> 管理员 </font>回复：
							#{/if}
						</td>
						<td class="replyBorder #{if reply.toUser && reply.isread==false}newMessage#{/if}">
							${reply.content}
						</td>
						<td class="replyBorder #{if reply.toUser && reply.isread==false}newMessage#{/if}">
							${reply.createAt.format("yyyy-MM-dd hh:mm:ss")}
						</td>
					</tr>
					#{/list}
				#{/if}
				<tr>
					<td></td>
					<td class="textRight">
						<font class="important_1"> 你 </font>回复：
					</td>
					<td>
						<textarea id="text_${msg.id}" style="width:100%;height:40px;"></textarea>
					</td>
					<td>
						<input type="button" 
							value="回复" 
							style="width:100%;height:40px;"
							onClick="doReply(${msg.id})">
					</td>
				</tr>
			#{/list}
		#{/if}
		#{else}
			<tr>
				<td colspan="6">没找到记录。</td>
			</tr>
		#{/else}
	</table>
	<div id="pager"></div>
</div>